<template>
  <div class="doctor-profile">
    <!-- 顶部导航 -->
    <van-nav-bar title="我的" fixed />

    <!-- 个人信息卡片 -->
    <div class="profile-card">
      <van-cell-group inset>
        <van-cell center :to="{ path: '/doctor/profile/edit' }">
          <template #icon>
            <van-image
              round
              width="60"
              height="60"
              :src="doctorInfo.avatar || '/avatar-default.png'"
              style="margin-right: 12px"
            />
          </template>
          <template #title>
            <div class="info">
              <h3>{{ doctorInfo.realName }}</h3>
              <div class="auth-status">
                <van-tag
                  :type="doctorInfo.isAuth === 1 ? 'success' : 'warning'"
                  style="margin-top: 4px"
                >
                  {{ doctorInfo.isAuth === 1 ? '已认证' : '未认证' }}
                </van-tag>
              </div>
<!--              <p>{{ doctorInfo.specialty || '暂无专业信息' }}</p>-->
            </div>
          </template>
          <template #right-icon>
            <van-icon name="arrow" />
          </template>
        </van-cell>
      </van-cell-group>
    </div>

    <!-- 功能菜单 -->
    <div class="menu-list">
<!--      <van-cell-group inset>-->
<!--        <van-cell title="在线接诊" center>-->
<!--          <template #right-icon>-->
<!--            <van-switch v-model="isOnline" @change="handleOnlineChange" />-->
<!--          </template>-->
<!--        </van-cell>-->
<!--      </van-cell-group>-->

      <van-cell-group inset style="margin-top: 12px">
        <van-cell
          title="修改密码"
          is-link
          to="/doctor/password"
        />
        <van-cell
          title="退出登录"
          @click="handleLogout"
          style="color: #ee0a24"
        />
      </van-cell-group>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { updateServiceStatus } from '@/api/doctor'
import { showSuccessToast, showFailToast, showConfirmDialog } from 'vant'

const router = useRouter()
const userStore = useUserStore()
const doctorInfo = ref(userStore.userInfo)
const isOnline = ref(doctorInfo.value.online)

// 切换在线状态
const handleOnlineChange = async (value) => {
  try {
    await updateServiceStatus(value)
    showSuccessToast(value ? '已开启接诊' : '已暂停接诊')
    doctorInfo.value.online = value
    userStore.setUserInfo({ ...doctorInfo.value })
  } catch (error) {
    isOnline.value = !value
    showFailToast('状态更新失败')
  }
}

// 退出登录
const handleLogout = async () => {
  try {
    await showConfirmDialog({
      title: '提示',
      message: '确认退出登录吗？'
    })
    userStore.userLogout()
    router.replace('/login')
  } catch (error) {
    if (error.cancel) return
    showFailToast('退出失败')
  }
}
</script>

<style lang="scss" scoped>
.doctor-profile {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-top: 46px;

  .profile-card {
    margin: 12px;

    .info {
      h3 {
        margin: 0;
        font-size: 18px;
        color: #323233;
      }
      .auth-status {
        margin-top: 4px;
        
        .van-tag {
          font-size: 12px;
          padding: 0 4px;
        }
      }
    }
  }

  .menu-list {
    margin: 12px;
  }
}
</style>
